﻿
@using FinancePortal.Web.Model
@model FinancePortal.Domain.Model.Resource
@{
    ViewBag.Title = "Create Activity";
}
<link href="@Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/fullcalendar.min.js")" type="text/javascript"></script>
<script type="text/javascript">

    function updateCalendar() {
        $('#calendar').fullCalendar('refetchEvents');
    }

    var selectedDate = new Date();

    $(document).ready(function () {
        $('#datepicker').datepicker({
            inline: true,
            onSelect: function (dateText, inst) {
                var d = new Date(dateText);
                $('#calendar').fullCalendar('gotoDate', d);
                selectedDate = d;
            }
        });
    });

    $(document).ready(function () {
        $('#calendar').fullCalendar({
            height: 646,   
            theme: true,
            header: {
                left: '',
                center: '',
                right: ''
            },
            defaultView: 'agendaDay',
            editable: false,
            events: '@Url.Action("ListActivities", "Calendar")', //"/Calendar.aspx/ListActivityId/",
            eventClick: function (calEvent, jsEvent, view) {
                var b = null;

                if (!calEvent.completed) {
                    b = { 'Delete': function () {
                        //$.post('/Calendar.aspx/ActivityModalDelete/' + calEvent.id.toString());
                        $.post('@Url.Action("ActivityModalDeletePost", "Calendar")' + '/' + calEvent.id.toString(),
                            function (data) { $('#calendar').fullCalendar('refetchEvents'); });
                        //setTimeout(updateCalendar, 1000);
                        alert('Activity deleted.');
                        $(this).dialog("close");
                        return true;
                    }
                    };
                }
                $('<div></div>')
                    .load('@Url.Action("ActivityModalDelete", "Calendar")' + '/' + calEvent.id.toString())
                    .dialog({
                        buttons: b,
                        resizable: false,
                        title: 'Schedule Description',
                        width: 500,
                        height: 400
                        //close: function (event, ui) { $('#calendar').fullCalendar('refetchEvents'); }
                    });
                return false;
            }
        });
    });

    function AddEvent() {
        var id = $('#ActivityId').val();
        if (id == null || id == '') {
            alert('Select a Activity!');
            return;
        }

        var warningDays = $('#warningDays').val();
        if (warningDays == null || warningDays == '') {
            alert('Insert the warning days!');
            return;
        }

        var realvalues = [];
        var clientvalues = [];
        $('#ResourceList :selected').each(function (i, selected) {
            realvalues[i] = $(selected).val();
        });

        //        $('#ClientList :selected').each(function (i, selected) {
        //            clientvalues[i] = $(selected).val();
        //        });

        $('#ClientList option').each(function (i, selected) {
            clientvalues[i] = $(selected).val();
        });

        var values = '';
        var clients = '';

        for (var i = 0; i < realvalues.length; i++) {
            values += realvalues[i];
            if (i < realvalues.length - 1) {
                values += ',';
            }
        }

        for (var i = 0; i < clientvalues.length; i++) {
            clients += clientvalues[i];
            if (i < clientvalues.length - 1) {
                clients += ',';
            }
        }

        if (realvalues.length == 0) {
            alert('Select at least one Resource!');
            return;
        }

        var fromHours = $('#fromHours').val();
        var fromMinutes = $('#fromMinutes').val();
        var toHours = fromHours;
        var toMinutes = fromMinutes + 30;

        if (fromMinutes == 45) {
            toMinutes = 15;
            toHours++;
        }

        var url = '@Url.Action("AddActivity", "Calendar")' //'/Calendar.aspx/AddActivity';
        var currentTime = selectedDate.getTime();
        var localOffset = (-1) * selectedDate.getTimezoneOffset() * 60000;

        var data = {
            dateStamp: Math.round(new Date(currentTime + localOffset).getTime() / 1000),
            fromHours: fromHours,
            fromMinutes: fromMinutes,
            toHours: toHours,
            toMinutes: toMinutes,
            ActivityId: id,
            warning: warningDays,
            resources: values,
            clients: clients,
            rnd: Math.random()
        };

        params = jQuery.param(data);
        type = "POST"

        $.ajax({
            url: url,
            type: "POST",
            data: params,
            success: function (msg) {
                if (msg != null)
                //if (msg.toString().toLower() == 'exp') {
                    if (msg == 'exp') {
                        document.location = '@Url.Action("ActivityManagement", "Calendar")' //"/Calendar.aspx/ActivityManagement";
                        return;
                    }
                $('#ActivityId').val('');
                $('#warningDays').val('');
                $("#ResourceList").empty();
                $("#ClientList").empty();
                $('#fromHours').val('09');
                $('#fromMinutes').val('00');

                setTimeout(updateCalendar, 500);
                alert('Activity added');
            }
        });
    }

    $(document).ready(function () {
        $("#ActivityId").change(function () {
            var idActivity = $(this).val();

            if (idActivity == '0') {
                var select = $("#ResourceList");
                select.empty();

//                select = $("#ClientList");
//                select.empty();
                return;
            }

            //$.getJSON("/Calendar.aspx/GetResourcesList", { id: idActivity },
            $.getJSON('@Url.Action("GetResourcesList", "Calendar")', { id: idActivity },
			function (resourceData) {
			    var select = $("#ResourceList");
			    select.empty();
			    $.each(resourceData, function (index, itemData) {
			        select.append($('<option/>', {
			            value: itemData.Value,
			            text: itemData.Text
			        }));
			    });
			});

            //            $.getJSON('@Url.Action("GetClientList", "Calendar")', { id: idActivity },
            //			function (resourceData) {
            //			    var select = $("#ClientList");
            //			    select.empty();
            //			    $.each(resourceData, function (index, itemData) {
            //			        select.append($('<option/>', {
            //			            value: itemData.Value,
            //			            text: itemData.Text
            //			        }));
            //			    });
            //			});
        });
    });

    function AddClient() {
        var select = $("#ClientList");
        var client = $("#Clients option:selected");
        var add = true;

        $('#ClientList option').each(function (i, selected) {
            if ($(selected).val() == client.val()) {
                alert('This area is already selected!');
                add = false;
            }
        });

        if (add) {
            select.append($('<option/>', {
                value: client.val(),
                text: client.text()
            }));
        }
    }

    function RemoveClient() {
        $('#ClientList :selected').each(function () {
            $(this).remove();
        });
    }
</script>
<div style="float: left;">
    <div id="datepicker">
    </div>
    <br />
    <div style="padding-bottom: 5px">
        <div style="width: 90px; float: left;">
            Area:</div>
        @Html.Label(Model.Area.Name)
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 90px; float: left;">
            Time:</div>
        <select id="fromHours">
            @for (var i = 9; i <= 20; i++)
            {
                <option>@i.ToString("00")</option>
            }
        </select>:
        <select id="fromMinutes">
            @for (var i = 0; i <= 45; i += 15)
            {
                <option>@i.ToString("00")</option>
            }
        </select>
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 90px; float: left;">
            Warning Days:</div>
        <input type="text" style="width: 50px" id="warningDays" />
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 90px; float: left;">
            Activity:</div>
        @Html.DropDownList(
            "ActivityId",
            null,
            new { style = "width: 140px;" }
            )
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 90px; float: left;">
            Resources:</div>
        <select id="ResourceList" size="6" multiple="multiple" style="width: 140px;">
        </select>
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 90px; float: left;">
            Clients Area:</div>
        @Html.DropDownList(
            "Clients",
            null,
            new { style = "width: 140px;" }
            )
    </div>
    <div style="padding-bottom: 5px; text-align: center;">
        <div style="width: 90px; float: left;">
            &nbsp;</div>
        <input type="button" value="Add Client" onclick="AddClient()" style="width: 100px; background-color: Gray;" />
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 90px; float: left;">
            &nbsp;
        </div>
        <select id="ClientList" size="6" multiple="multiple" style="width: 140px;">
        </select>
    </div>
    <div style="padding-bottom: 5px; text-align: center;">
        <div style="width: 90px; float: left;">
            &nbsp;</div>
        <input type="button" value="Remove Client" onclick="RemoveClient()" style="width: 100px;
            background-color: Gray;" />
    </div>
    <div>
        <div style="width: 90px; float: left;">
            &nbsp;</div>
        <input type="button" value="Add Activity" onclick="AddEvent()" style="width: 140px;" />
    </div>
</div>
<div id='calendar' style="float: right; width: 590px;">
</div>
<div>
    &nbsp;</div>
<div style="clear: both">
    &nbsp;</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pageTitle').text('Activity Management');
    });
    //    var path = 'Url.Content("~/xml/menu-config.xml")';
    //    var brand = new brand('Calendar', 'Activity Management', 'top', path);
    //    createSectionTitleName();
    //    createFontWidget('all', 'yes');
</script>
